<template>
<div class="whole">
  <div class="login">
    <div class="header">
      <h2>Banner官网后台管理系统</h2>
    </div>

    <div class="content">
      <div class="input">
        <el-input v-model="username" placeholder="请输入账号"  ref="adminname"></el-input>
      </div>
     <div class="input">
       <el-input placeholder="请输入密码" v-model="password" show-password  ref="adminword"></el-input>
     </div>
      <el-button type="primary" @click="homepageClick">登录</el-button>
    </div>

  </div>
</div>
</template>

<script>
import {Message} from "element-ui";

export default {
  name: "Login",
  data() {
    return {
      username: '',
      password:''
    }
  },
  methods: {
    //跳转主页，并向vuex传递用户相关数据
    homepageClick() {
      console.log(1111111)
      if(this.$refs.adminname.value!==''&&this.$refs.adminword.value!==''){
        console.log(22222)
        this.$axios({
          url:'/officialwebsite/admin',
          method:'post',
          // headers:{
          //   'X-CSRFToken': this.getCookie('csrftoken')
          // },
          data:{
            name:this.$refs.adminname.value,
            password:this.$refs.adminword.value,
          },
        }).then(res=>{
          console.log(res.obj)
          if(res.obj==true){
            Message.success({message: '登录成功！'});
            this.$router.replace('/banneradmin')
            this.$store.state.User.admin=true
          }else{
            Message.error({message: '账号或密码错误！'});
          }
        })
      }else{
        Message.error({message: '请正确输入账号密码！'});
      }
    },
  }


}
</script>

<style lang="less" scoped>
  .whole{
    background-color: #334E69;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    .login {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 500px;
      height: 300px;
      text-align: center;
      .header {
        height: 40px;
        h2 {
          line-height: 50px;
          color: white;
        }
      }
      .content {
        width: 350px;
        margin: 30px auto;
        .input {
          margin-bottom: 20px;
        }
        .el-button {
          width: 350px;
        }
      }
    }
  }

</style>
